
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
</head>
<body>
    <canvas id="canvas_1" width="500" height="500" style="box-shadow: 0 0 20px black;">
        当前浏览器不支持 canvas
    </canvas>
</body>
<script type="text/javascript">
 
    // 获取 canvas 元素对应的 DOM 对象
    var canvas_1 = document.getElementById("canvas_1");
 
    // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
    var ctx = canvas_1.getContext("2d");
 
    // 打印一下，查看是否能够显示具体环境
    ctx.beginPath();
    ctx.moveTo(100,100);
    ctx.lineTo(200,200);
    ctx.closePath();
    ctx.lineWidth = 1;
    ctx.stroke();
    ctx.fillStyle = '#333333'
    ctx.fill();
</script>
</html>